<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../../css/首页分页/active01.css">
    <link rel="stylesheet" href="../../css/bottom.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1432742_psd3uzsxo4n.css">
    <script src="../../js/rem.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/comment.js"></script>
    <script>
        $.post(cart_cartShow_Api, {
            id
        }, data => {
            console.log(data);
            let number = 0
            data.forEach(v => {
                number += v.number
            })
            console.log(number);
            $('#num').text(number)
        })
        
        $('.icon-gouwuche1').click(function(){
            location.href='../购物车.html'
            console.log(1);
        })
    </script>
    <style>
        #num {
            position: absolute;
            color: white;
            background: red;
            display: block;
            border-radius: 50%;
            width: .26rem;
            height: .26rem;
            text-align: center;
            line-height: .26rem;
            font-size: .12rem;
            right: 0;
            top: 0
        }
    </style>
</head>

<body>
    <header>
        <a href="../../首页.html">
            <div class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></div>
        </a>
        <div>
            <span class="iconfont icon-sousuo"></span>
            <span class="iconfont icon-gouwuche1" style="position: relative">
                <span id="num"></span>
            </span>
        </div>
    </header>
    <ul class="list">
        <li>销量</li>
        <li>新品</li>
        <li>价格</li>
    </ul>
    <main>
        <ul class="content1">
            <li>
                <div class="l"><img src="" alt=""></div>
                <div class="r">
                    <p class="title">农百鲜樱桃谷鸭950g鸭种 肉质细嫩鸭种 肉质细嫩</p>
                    <span class="desc">瘦肉型鸭种 肉质细嫩</span>
                    <span class="youhui">第二件0元</span>
                    <div class="bottom">
                        <div class="price">
                            <span class="pprice">￥29.90 </span>
                            <span class="danjia">950g/只</span>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </li>
        </ul>
    </main>
    <script>
        axios.post(goods_salesVolume_Api, {
            params: {}
        }).then(res => {
            console.log(res.data);
            let cont = document.querySelector(".content1");
            var html = res.data.map(v =>
                `<li data-id ="${v.id}">
                    <div class="l"><img src="" alt=""></div>
                    <div class="r">
                        <p class="title">${v.name}</p>
                        <span class="desc">${v. describe}</span>
                        <span class="youhui">第二件0元</span>
                        <div class="bottom">
                            <div class="price">
                                <span class="pprice">￥${v.price} </span>
                                <span class="danjia">950g/只</span>
                            </div>
                            <div class="add" data-id ="${v.id}">+</div>
                        </div>
                    </div>
                </li>
                `).join("")
            cont.innerHTML = html;
            Anext();
        })
    </script>

    <script>
        //加入购物车
        let Anext = function () {
            let addBtns = document.querySelectorAll(".add");
            addBtns.forEach(v =>
                v.onclick = function () {
                    console.log(v);
                    let goodsId = v.getAttribute('data-id')
                    console.log(goodsId);
                    $.post(insertGoods_Api, {
                        id,
                        goodsId,
                        number: 1
                    }, function (data) {
                        console.log(data);
                    })
                    //点击商品加入购物车（调用接口）
                    event.stopPropagation();
                    //数量更新
                }
            )

            // 点击商品进入详情页
            let cont = document.querySelector(".content1");
            let ContLi = cont.querySelectorAll("li");
            ContLi.forEach(v =>
                v.onclick = function () {
                    console.log(v.getAttribute("data-id"));
                    let goods_id = v.getAttribute("data-id");
                    console.log(goods_id);
                    //    调用接口 进入详情页
                    location.href = `../详情.html?id=${goods_id}`;
                }
            )
        }
    </script>
    <script>
        let str = location.search.slice(1)
        let obj = parseQuery(str)
        let id1 = obj.id
        console.log(id1);
        if (id1 == undefined) {
            console.log(2);
        } else {
            $(function () {
                $.post(goods_id_Api, {
                    id: id1
                }, function (res) {
                    console.log(res);
                    let cont = document.querySelector(".content1");
                    var html = res.map(v =>
                        `<li data-id = ${v.id}>
                    <div class="l"><img src="" alt=""></div>
                    <div class="r">
                        <p class="title">${v.name}</p>
                        <span class="desc">${v. describe}</span>
                        <span class="youhui">第二件0元</span>
                        <div class="bottom">
                            <div class="price">
                                <span class="pprice">￥${v.price} </span>
                                <span class="danjia">950g/只</span>
                            </div>
                            <div class="add" data-id="${v.id}">+</div>
                        </div>
                    </div>
                </li>
                `).join("")
                    cont.innerHTML = html;
                    Anext();
                })
            })
        }
    </script>
</body>

</html>